(function(root) {
	function Guide(opts) {
		this.opts = Object.assign({
			arr: [],
			complete: function(){}
		}, opts||{});
		this.initialize();
	}

	Guide.prototype = {
		constructor: Guide,
		initialize: function() {
			this.index = -1;
			this.showMask();
			this.next();
			this.bindEvent();
		},
		bindEvent: function() {
			var me = this;
			$('.guide_next').on('click', function() {
				me.next();
			});
		},
		next: function() {
			this.index++;
			if(this.index < this.opts.arr.length){
				this.createGuideItem();
			}else{
				this.hideMask();
				this.opts.complete && this.opts.complete();
			}
		},
		createGuideItem: function() {
			var item = this.opts.arr[this.index];
			if(!this.$guideItem) {
				this.$guideItem = $(this.getGuideItemHtml());
			}
			$('.guide_title', this.$guideItem).html(item.title||item.getTitle());
			$('.guide_desc', this.$guideItem).html(item.desc);
			this.$guideItem.attr('class', 'guide_item').addClass(item.class);
			this.$mask.html(this.$guideItem);
		},
		getGuideItemHtml: function() {
			return 	'<div class="guide_item">\
						<div class="guide_title"></div>\
						<div class="g-clear"></div>\
						<div class="guide_panel">\
							<div class="guide_desc"></div>\
							<div class="guide_next">继续</div>\
						</div>\
					</div>';
		},
		showMask: function() {
			var $mask = $('.modal-overlay');
			if($mask.length == 0) {
				$mask = $('<div class="modal-overlay"></div>')
				$('body').append($mask);
			}
			$mask.addClass('modal-overlay-visible');
			this.$mask = $mask;
		},
		hideMask: function() {
			$('.modal-overlay').removeClass('modal-overlay-visible').html('');
		}
	}

	root.Guide = Guide;
})(window);
